/**
* Created by zhong on 2018/1/25.
*/
<template>
    <div class="timer-set-modal">
        <div class="cover" @click="close(0)"></div>
        <div class="modal-box" id="select">
            <div class="iconfont icon-close1 close" @click="close(0)"></div>
            <div class="level-box" v-select="{set:set,count:countIndex}">
                <ul>
                    <li v-for="i in countList" class="level" :class="{'active':count*1===i*1}">{{i}}</li>
                </ul>
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="text">分钟</div>
            </div>
            <div class="orange-btn small" @click="close(count)">确定</div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show:true,
                countList:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,20,25,30,35,40,45,50,55,60,70,80,90],
                count:'',
            }
        },
        computed:{
            countIndex(){
                if(this.counter){
                    for(let c in this.countList){
                        if(this.countList[c] === this.counter*1){
                           return c
                        }
                    }
                }else {
                    return 2
                }
            }
        },
        props:['counter'],
        mounted: function() {
            this.count = this.counter || this.countList[2]
        },
        methods: {
            close:function(c){
                this.show = false;
                this.$emit("close",c)
            },
            set:function (count) {
                this.count = this.countList[count]
            }
        }
    }
</script>

<style lang="scss">
    .cover{
        height: 100%;
        width:100%;
        position: absolute;
    }
    .timer-set-modal{
        height: 100%;
        width:100%;
        background: rgba(0,0,0,.7);
        position: fixed;
        left: 0;
        top:0;
        z-index: 99;
        .modal-box{
            background: #fff;
            width: 80%;
            margin: 30% auto;
            border-radius: 12px;
            min-height: 260px;
            padding-top:60px;
            position: relative;
            .close{
                position: absolute;
                right: 10px;
                top: 10px;
                color: #888;
            }
        }
        .level-box{
            height: 120px;
            overflow: hidden;
            position: relative;
            .level{
                list-style: none;
                line-height: 30px;
                font-size: 14px;
                font-weight: 600;
                color:#4b4b4b;
            }
            ul{
                padding:0;
                margin-top: 45px;
                .active{
                    font-weight: 700;
                    font-size: 20px;
                    color:#333;
                }
            }
            .line1,.line2{
                width:80px;
                border-bottom:1px solid #fc6;
                position: absolute;
                left: 105px;
            }
            .line1{
                top:45px;
            }
            .line2{
                top:75px;
            }
            .text{
                position: absolute;
                left: 185px;
                top: 50px;
            }
        }
        .small{
            font-size: 14px;
            width: 72px;
            height: 30px;
            line-height: 30px;
            color: #fff;
        }
    }
</style>
